<template>
	<view
	class="app-components-empty"
		:style="{
			paddingTop
		}"
		v-if="show"
	>
		<view class="app-components-empty__img">
			<image
				:src="icon||$staticPath('default_img.png')"
				:style="{
					width,
					height
				}"
			></image>
		</view>
		<view class="app-components-empty__text " :style="{ marginTop }">
			<text class="e-font-26 c-secondary ">{{ text }}</text>
		</view>
		<slot></slot>
	</view>
</template>
<script lang="ts">
export default {
	name: 'empty',
	props: {
		icon: {
			type: String
		},
		show: {
			type: Boolean,
			default: true
		},
		width: {
			type: String,
			default: '400rpx'
		},
		height: {
			type: String,
			default: '280rpx'
		},
		paddingTop: {
			type: String,
			default: '178rpx'
		},
		text: String,
		marginTop: {
			type: String,
			default: '32rpx'
		}
	}
}
</script>

<style lang="scss" scoped>
@include appBem_b(components-empty){
	@include appBem_e(img){
		@include flex;
		justify-content: center;
	}
	@include appBem_e(text){
		@include flex;
		justify-content: center;
	}
}
</style>
